<template>
    <div class="container">
            <n-card class="card">
                <ul>
                    <li v-for="(item,index) in filterArticleList" :key="index" class="article_li" style="padding: 5px;border-bottom: 1px solid #f2f2f2;" @click="viewDeatil(item.id)">
                        <div class="flex at-center">
                            <div style="padding: 0 5px;">{{ users.length && toUserName(item.authorId) }}</div>
                            <div style="padding: 0 5px;border-left: 1px solid #f2f2f2;border-right: 1px solid #f2f2f2;">{{ item.audit_time }}</div>
                            <div style="padding: 0 5px; font-size: 12px;color: #ccc;">{{ tagsList && toTagNames(item.tags)  }}</div>
                        </div>
                        <h2 class="mt10">{{ item.title }}</h2>
                        <!-- <p class="mt10" style="color: #8a919f;" v-html="item.content.substring(0,20)"></p> -->
                        <div class="flex mt10">
                            <div style="margin-right: 10px;"><SvgIcon iconName="icon-dianzan"></SvgIcon ><span style="margin-left: 5px;">{{ item.like_count }}</span></div>
                            <div style="margin-right: 10px;"><SvgIcon iconName="icon-liulan"></SvgIcon ><span style="margin-left: 5px;">{{ item.view_count }}</span></div>
                            <div style="margin-right: 10px;"><SvgIcon iconName="icon-lvsefenkaicankaoxianban-"></SvgIcon ><span style="margin-left: 5px;">{{ item.collect_count }}</span></div>
                        </div>
                    </li>
                </ul>
            </n-card>
        </div>
  </template>
  
  <script setup lang="ts">
  import { useRoute,useRouter,onBeforeRouteUpdate } from 'vue-router'
  import requestList from '@/service/request';
  import { getItem } from '@/utils/local';
  import { onMounted, ref ,watch,computed} from 'vue';
  
  const router = useRouter()
  const route = useRoute()
  let searchWord = route.query.searchWord
  


  const tagsList = ref<any[]>([])
const getTagList = async ()=>{
    const res = await requestList.tagListApi({all:true})
    if(res.code === 1){
        tagsList.value = (res.data as any)
    }
}

const filterArticleList = ref<any[]>([])
const getArticleList = async ()=>{
    const res = await requestList.articleListApi({all:true,searchWord})
    if(res.code === 1){
        filterArticleList.value = (res.data as any)
    }
}
watch(
    () => route.query,
    (val: any) => {
        searchWord = val.searchWord
        getArticleList()
    },
)


// 用戶列表
const users = ref([])
const getUsers = async () => {
    const res = await requestList.userListApi({all:true})
    if(res.code === 1){
        users.value = (res.data as any)
    }
}

const  toUserName = (id:number) => {
    const target = users.value.find((item:any)=>(item.id===id))
    const name = target?(target as any).username:''
    return name
}

const  toTagNames = (ids:string) :string => {
    let target:string = ''
    const idsArr = ids.split(',')
    const targetNamesArr:string[] = []
    idsArr.forEach((id:any)=>{
        tagsList.value.forEach((item:any)=>{
            if(id == item.id){
                targetNamesArr.push(item.tag_name)
            }
        })
    })
    console.log(targetNamesArr);
    target = targetNamesArr.join(',')    
    return target
}


const viewDeatil = (index:number) => {
    router.push({
        name:'articleDetails',
        query:{id:index}
    })
}
  onMounted(()=>{
    console.log(route.query);
    
    getTagList()
    getArticleList()
    getUsers()
  })
  
  </script>
  
  <style lang="scss" scoped>

.card{
        border-radius: 5px;
        .level-h1{
            padding: 5px 0;
            border-bottom: 2px solid $color3;
        }
        .level-icon{
            width: 20px;
            height: 20px;
        }
        .level-title{
            font-size: 20px;
            margin-left: 10px;
            font-weight: 600;
        }
        .level-li{
            padding: 5px 0;
            &-index{
                font-size: 18px;
            }
            &-title{
                margin-left: 5px;
                font-size: 15px;
            }
        }
    }

    .article_li{
    cursor: pointer;
    transition: all .5s;
    &:hover{
        background: #f6f6f6;
    }
}
  </style>